<template>
  <div>
    <el-dialog
      v-model="centerDialogVisible"
      @close="onClose"
      :title="dialogTitle"
      width="40%"
      align-center
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-divider />
        <el-form-item label="机构名称" prop="departName">
          <el-input
            v-model="ruleForm.departName"

            autocomplete="off"
            placeholder="请输入机构名称"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item v-if="ruleForm.parentName" label="上级部门">
          <el-input
            v-model="ruleForm.parentName"

            disabled
            autocomplete="off"
            placeholder="请输入机构名称"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="ruleForm.mobile"

            maxlength="11"
            autocomplete="off"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
            v-model="ruleForm.address"

            autocomplete="off"
            placeholder="请输入地址"
            maxlength="300"
          />
        </el-form-item>
        <el-form-item label="排序值" prop="departOrder">
          <el-input-number v-model="ruleForm.departOrder" controls-position="right" />
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input
            v-model="ruleForm.memo"
            type="textarea"
            autocomplete="off"
            placeholder="请输入备注"
            maxlength="300"
            show-word-limit
          />
        </el-form-item>
        <el-divider />
        <div class="btn-all">
          <el-button @click="resetForm(ruleFormRef)">关闭</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { vCheckVal } from '@/directives/checkVal'
import { addDepart } from '@/api/department/index'
const centerDialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const dialogTitle = ref('新增')
const ruleForm = reactive({
  address: '',
  departName: '',
  departOrder: 0,
  memo: '',
  mobile: '',
  parentId: '',
  parentName: ''
})
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入类型名称'))
  } else {
    callback()
  }
}
const rules = reactive<FormRules>({
  // value: [{ required: false, validator: validatePass, trigger: 'blur' }],
  departName: [{ required: true, validator: validatePass2, trigger: 'blur' }],
  mobile: [
    {
      required: false,
      trigger: 'blur',
      message: '手机号格式不正确',
      pattern: /^((1[34578]\d{9}))$/
    }
  ]
})
//添加部门
const addPart = async () => {
  let { code, message } = await addDepart(ruleForm)
  if (Number(code) == 200) {
    ElMessage({
      message: message,
      type: 'success'
    })
    centerDialogVisible.value = false
    emit('addSend', centerDialogVisible.value)
  } else {
    ElMessage.error(message)
  }
}
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      addPart()
      // console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  centerDialogVisible.value = false
  emit('addSend', centerDialogVisible.value)
  // sendDataDictList.itemText = ''
  // sendDataDictList.status = ''
  // getChildrenList()
}
// 接收值
const props = defineProps<{
  passStatus: boolean
}>()
// 重置
const resetFrom = () => {
  ruleForm.address = ''
  ruleForm.departName = ''
  ruleForm.departOrder = 1
  ruleForm.memo = ''
  ruleForm.mobile = ''
  ruleForm.parentId = ''
}
watch(
  () => props.passStatus,
  (newval: boolean, oldval: boolean) => {
    // addDataDialog()
    resetFrom()
    centerDialogVisible.value = newval
  }
)
// 2、定义发射给父组件的方法
const emit = defineEmits(['addClose', 'addSend'])

const onClose = () => {
  centerDialogVisible.value = false
  emit('addClose', centerDialogVisible.value)
}
const addChild = (data) => {
  console.log(data, 'data')
  ruleForm.parentId = data.id
  ruleForm.parentName = data.title
  centerDialogVisible.value = true
}
defineExpose({
  addChild
})
</script>

<style scoped></style>
